import React, { createRef, memo, useEffect, useState } from 'react'
import { CloseOutlined, LeftOutlined, RightOutlined, CaretDownOutlined, CaretUpOutlined } from '@ant-design/icons'
import { SwitchTransition, CSSTransition } from 'react-transition-group'
import { BrowserWrapper } from './style'
import Indicator from '../indicator'
import classNames from 'classnames'

// 图片浏览器
const PictureBrowser = memo((props) => {
  const { pictureUrls, closeClick } = props
  // 当前图片索引
  const [currentIndex, setCurrentIndex] = useState(0)
  // 记录当前操作是上一张还是下一张
  const [isNext, setIsNext] = useState(true)
  // 列表的显示与隐藏
  const [showList, setShowList] = useState(true)

  useEffect(() => {
    // 当图片浏览器展示出来时,让滚动的功能消失(原始页面内容可能过长,默认有滚动条)
    document.body.style.overflow = 'hidden'

    // 当图片浏览器关闭时,恢复继续滚动
    return () => {
      document.body.style.overflow = 'auto'
    }
  }, [])

  function handleClose() {
    closeClick && closeClick()
  }

  function handleControlClick(isNext = true) {
    let newIndex = isNext ? currentIndex + 1 : currentIndex - 1
    // 边界判断
    if (newIndex < 0) {
      newIndex = pictureUrls.length - 1
    } else if (newIndex > pictureUrls.length - 1) {
      newIndex = 0
    }

    setCurrentIndex(newIndex)
    setIsNext(isNext)
  }

  function handleBottomItemClick(index) {
    // 如果 index > currentIndex 则点击的是后面的,否则点击的是前面的
    setIsNext(index > currentIndex)
    setCurrentIndex(index)
  }

  const ref = createRef()

  return (
    <BrowserWrapper $isNext={isNext} $showList={showList}>
      <div className="top">
        {/* 关闭按钮 */}
        <div className="close-btn" onClick={() => handleClose()}>
          <CloseOutlined style={{ fontSize: '38px', color: '#fff' }} />
        </div>
      </div>
      <div className="slider">
        <div className="control">
          <div className="btn left" onClick={() => handleControlClick(false)}>
            <LeftOutlined style={{ width: '77px', height: '77px', fontSize: '32px', color: '#fff' }} />
          </div>
          <div className="btn right" onClick={() => handleControlClick(true)}>
            <RightOutlined style={{ width: '77px', height: '77px', fontSize: '32px', color: '#fff' }} />
          </div>
        </div>
        <div className="picture">
          {/* 使用 react-transition-group 库实现动画 */}
          <SwitchTransition mode="in-out">
            {/* 需要设置一个 key,两次动画 key 值不一样 */}
            <CSSTransition nodeRef={ref} key={pictureUrls[currentIndex]} classNames="pic" timeout={200}>
              <img ref={ref} src={pictureUrls[currentIndex]} alt="" />
            </CSSTransition>
          </SwitchTransition>
        </div>
      </div>
      <div className="preview">
        <div className="info">
          <div className="desc">
            <div className="count">
              <span>
                {currentIndex + 1} / {pictureUrls.length}
              </span>
              <span>room apartment图片{currentIndex + 1}</span>
            </div>
            <div className="toggle" onClick={() => setShowList(!showList)}>
              <span>{showList ? '隐藏' : '显示'}照片列表</span>
              {showList ? <CaretDownOutlined /> : <CaretUpOutlined />}
            </div>
          </div>
          {/* 图片列表 */}
          <div className="list">
            <Indicator selectIndex={currentIndex}>
              {pictureUrls.map((item, index) => {
                return (
                  <div className={classNames('item', { active: currentIndex === index })} key={item} onClick={() => handleBottomItemClick(index)}>
                    <img src={item} alt="" />
                  </div>
                )
              })}
            </Indicator>
          </div>
        </div>
      </div>
    </BrowserWrapper>
  )
})

export default PictureBrowser
